<template>
  <section class="login">
    <main>
      <div class="logo">
        <img src="/passport_left_banner_default.jpg" alt="" />
      </div>
      <div class="form">
        <div class="title">
          <span>请输入用户名和密码</span>
          <i class="iconfont icon-delete" @click="handleClose" style="cursor: pointer"></i>
        </div>
        <div class="input">
          <el-input v-model="inputUsername" placeholder="请输入用户名" />
          <el-input type="password" v-model="inputPassword" placeholder="请输入密码" />
          <el-button type="primary" @click="login">立即登录</el-button>
        </div>
      </div>
    </main>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { getPoiListApi } from '@/api/index.js'
const emit = defineEmits(['close'])
const handleClose = () => {
  emit('close')
}

const props = defineProps({
  loginUsername: {
    type: String,
    default: '',
  },

  isLogin: {
    type: Boolean,
    default: false,
  },
})

const inputUsername = ref('')
const inputPassword = ref('')

const login = async () => {
  const users = await getPoiListApi()
  // console.log(users)
  if (users.length != 0) {
    if (inputUsername.value && inputPassword.value) {
      users.forEach((item) => {
        // console.log(item)
        // console.log(typeof item)
        console.log(typeof item.username)
        console.log(typeof item.password)
        if (item.username === inputUsername.value && item.password === inputPassword.value) {
          // console.log('登录成功')
          //子组件不能修改,待解决
          // props.loginUsername = item.username
          // props.isLogin = true
          alert('登录成功')
          handleClose()
        } else {
          alert('用户名或密码错误')
        }
      })
    } else {
      alert('用户名或密码不能为空')
    }
  }
}
</script>

<style scoped>
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 9999;
  main {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 500px;
    background: #fff;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 380px;
      height: 500px;
    }
    .form {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 50px;
      width: 520px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .input {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
    }
  }
}
</style>
